<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <link rel="stylesheet" type="text/css" href="../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../css/aui-slide.css" />
    <link rel="stylesheet" type="text/css" href="../css/style.css" />

    <style type="text/css">
        .text-light {
            color: #999;
        }

        .text-dark {
            color: #333 !important;
        }

        .bg-white {
            background: #ffffff;
        }

        .aui-list .aui-list-item-label-icon.label-text {
            line-height: 2.1rem;
            align-items: baseline;
            -webkit-align-items: baseline;
        }

        .aui-tab-item {
            width: 2rem;
            margin: 0 auto;
        }

        .aui-card-list-content {
            height: 18.75rem
        }

        .red-bg-time {
            height: 2.7rem;
            padding: 0 .6rem
        }

        .down-time text {
            background: #fff;
            height: 1rem;
            line-height: 1rem;
            padding: 0 .2rem;
            border-radius: .1rem;
            color: #E93324;
        }

        .groub-price {
            height: .7rem;
            line-height: .7rem;
            background: #fff;
            border-radius: .4rem;
            width: 2.1rem;
            text-align: center;
            padding: 0 !important;
            border: none;
        }

        .goods-minprice {
            margin-right: .3rem
        }

        .goods-maxprice {
            text-decoration: line-through;
        }

        .goods-info {
            padding: .6rem .6rem 0 .6rem
        }

        .goods-lable {
            font-size: .5rem;
            padding: 0 .3rem;
            height: .7rem;
            text-align: center;
            line-height: .7rem;
            border-radius: .5rem;
            margin-right: .2rem;
            margin-top: .4rem;
            border: 1px solid #E93324;
            width: fit-content;
            display: inline-block;
        }

        .buy-people {
            height: 2.2rem
        }

        .people-imgs {
            margin-right: .3rem;
            overflow: hidden;
        }

        .avatrl {
            height: 1.2rem;
            width: 1.2rem;
            border-radius: 50%
        }

        .setps {
            height: 4.35rem;
            position: relative;
            margin: auto 1.65rem;
            overflow: hidden;
        }

        .dian {
            height: .6rem;
            width: .6rem;
            background-color: #06C39A;
            border-radius: 50%
        }

        .step-item {
            color: #06C39A;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .line {
            position: absolute;
            top: 1.3rem;
            left: 1.2rem;
            background: #F2F2F2;
            height: .1rem;
            width: calc(100% - 2.4rem);
            z-index: 0
        }

        .step-z-index {
            position: absolute;
            ;
            z-index: 1
        }

        .buy-record {
            height: 1rem
        }

        .info-head {
            height: 2.2rem;
            width: 100%;
            line-height: 2.2rem;
            text-align: center;
            background: #fff;
        }

        .info-img img {
            height: 18.75rem;
            width: 100%;
        }

        .relative {
            position: relative;
        }

        .yus-img {
            position: absolute;
            left: .6rem;
            top: 0;
            height: 3.05rem !important;
            width: 2.8rem !important
        }
    </style>
</head>

<body>
    <div id="app">


        <section class="aui-card-list">
            <div class="aui-card-list-content " id="aui-slide">
                <div class="aui-slide-wrap">
                    <div class="aui-slide-node bg-dark relative" v-for='(item,index) in slideImgs'>
                        <img :src="item.imgUrl" />
                        <img class='yus-img' src="../image/goods/yus.png" alt="">
                    </div>

                </div>
                <div class="aui-slide-page-wrap">
                    <!--分页容器-->
                </div>

            </div>
            <div class="red-btn red-bg-time flex-justify-between" style="line-height:inherit">
                <div class="flex-align-center">
                    <div class="goods-minprice">
                        ¥<span class="font-40">{{goodsData.minPrice}}</span>
                    </div>
                    <div class="">
                        <button class='groub-price font-10 red-text' type="button" name="button">团购价</button>
                        <div class='goods-maxprice font-12'>¥{{goodsData.maxPrice}}</div>
                    </div>
                </div>
                <div class="font-12">
                    <div class="" v-if='isTimeOut'>
                        活动已结束
                    </div>
                    <div v-else>
                        <div class="">
                            距结束仅剩
                        </div>
                        <div class="down-time" v-for='item in countDownData'>
                            <span>{{item.day}}</span>天
                            <span>{{item.hou}}</span>时
                            <span>{{item.min}}</span>分
                            <span>{{item.sec}}</span>秒
                        </div>
                    </div>
                </div>
            </div>

            <div class="goods-info">
                <div class="flex-center-between">
                    <div class="">
                        <div class="goods-name font-16 font-semibold">
                            {{goodsData.name}}
                        </div>
                        <div class="">
                          <div class='goods-lable red-text' v-for='item in goodsData.lables'>{{item}}</div>
                        </div>
                    </div>
                    <div style="text-align:center">
                        <div class="focus-num red-text font-18">
                              {{goodsData.fans}}
                        </div>
                        <div class="focus-text font-12 text-color-9">
                            关注人数
                        </div>
                    </div>
                </div>
                <div class="font-12 flex-center-between" style='margin: .4rem 0'>
                    <div class="text-color-6">
                        20:00前下单，预计07/18可自提
                    </div>
                    <div class="">
                        已售<span class="red-text">{{goodsData.saleNum}}</span>份/限量2000份
                    </div>
                </div>

                <div class='setps flex-align-center'>
                    <div class="line"></div>
                    <div class="flex-justify-between step-z-index" style="width:100%">
                        <div class="step-item" v-for='item in steps'>
                            <div class="dian"></div>
                            <div class="font-12">
                                {{item.step}}
                            </div>
                            <div class="font-10">
                                {{item.time}}
                            </div>
                        </div>
                    </div>
                </div>
                <div class="buy-record flex-center-between">
                    <div class="font-14 text-color-3 font-semibold">
                        购买记录
                    </div>
                    <div class="font-12 text-color-6">
                        199人
                    </div>
                </div>
                <div class="buy-people  flex-justify-between">
                    <div class="people-imgs flex-align-center">
                        <img class='avatrl' src="../image/gril.jpg" alt="">
                        <img class='avatrl' src="../image/gril.jpg" alt="">
                        <img class='avatrl' src="../image/gril.jpg" alt="">
                    </div>
                    <img class='grey-right' src=" ../image/common/grey-right.png " alt=" ">
                </div>
            </div>
        </section>
        <section class="aui-content aui-margin-b-15">
            <div class="info-head font-14 text-color-3 font-semibold">
                商品信息
            </div>
            <div class="info-img">
                <img src="http://img10.360buyimg.com/n1/s450x450_jfs/t4276/257/2416766721/125228/ba72a107/58d1d078N20e18b62.jpg" />
                <img src="http://img10.360buyimg.com/n1/s450x450_jfs/t4276/257/2416766721/125228/ba72a107/58d1d078N20e18b62.jpg" />
            </div>
        </section>

    </div>
</body>
<script type="text/javascript" src="../script/aui-slide.js"></script>
<script type="text/javascript" src="../script/aui-tab.js"></script>
<script type="text/javascript " src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js "></script>

<script type="text/javascript">
    var vm = new Vue({
        el: '#app',
        data: {
            slideImgs: [{
                imgUrl: 'http://img10.360buyimg.com/n1/s450x450_jfs/t4276/257/2416766721/125228/ba72a107/58d1d078N20e18b62.jpg'
            }, {
                imgUrl: 'http://img10.360buyimg.com/n1/s450x450_jfs/t4276/257/2416766721/125228/ba72a107/58d1d078N20e18b62.jpg'
            }, {
                imgUrl: 'http://img10.360buyimg.com/n1/s450x450_jfs/t4276/257/2416766721/125228/ba72a107/58d1d078N20e18b62.jpg'
            }],
            steps: [{
                step: '开始',
                time: '05-10 10:00'
            },
            {
                step: '期间',
                time: '05-11 10:00'
            },
            {
                step: '结束',
                time: '05-12 10:00'
            },
          ],
            goodsData: {
                minPrice: 99,
                maxPrice: 122,
                actTime: '2019-10-08 14:51:00', //活动时间
                name:'iphone 11',
                fans:2222,
                lables:['美国产品','保真'],
                saleNum:20
            },
            countDownData: [],
            isInterval: true,
            isTimeOut: false, //活动结束
        },
        mounted() {
            let that = this;
            that.countDown()
        },
        methods: {
            timeFormat: function(param) {
                return param < 10 ? '0' + param : param;
            },
            countDown() {
                // 获取当前时间
                let newTime = new Date().getTime();
                //获取活动时间
                let actTime = this.goodsData.actTime;
                let countDownObj = [];
                // 获取活动结束时间的总毫秒数
                // let endTime = util.stringToDate(actTime).getTime();
                let endTime = new Date(actTime).getTime();
                let obj = null;
                // 如果活动未结束，对时间进行处理
                if (endTime - newTime > 0) {
                    //获得距离结束时间的总秒数
                    let time = (endTime - newTime) / 1000;
                    // 获取天、时、分、秒
                    let day = parseInt(time / (60 * 60 * 24));
                    let hou = parseInt(time % (60 * 60 * 24) / 3600);
                    let min = parseInt(time % (60 * 60 * 24) % 3600 / 60);
                    let sec = parseInt(time % (60 * 60 * 24) % 3600 % 60);
                    obj = {
                        day: this.timeFormat(day),
                        hou: this.timeFormat(hou),
                        min: this.timeFormat(min),
                        sec: this.timeFormat(sec)
                    }

                    if (this.isInterval) {
                        setTimeout(this.countDown, 1000);
                    }
                } else { //活动已结束，全部设置为'00'
                    this.isTimeOut = true
                        // obj = {
                        //     day: '00',
                        //     hou: '00',
                        //     min: '00',
                        //     sec: '00'
                        // }
                }
                countDownObj.push(obj);
                // 渲染，然后每隔一秒执行一次倒计时函数
                this.countDownData = countDownObj;
            },

        }
    })
    var slide = new auiSlide({
        container: document.getElementById("aui-slide"),
        // "width":300,
        "height": 360,
        "speed": 300,
        "pageShow": true,
        "pageStyle": 'dot',
        "loop": true,
        'dotPosition': 'center',
        // currentPage:currentFun
    })
</script>

</html>
